<script setup lang="ts">
import { getAdminsOptLogApi } from '@/apis/modules/admin'
import MultipleConditionSearch from '@/components/multiple-condition-search'

import { useConfig } from './useConfig'

const { tableColumns, filterSchemes } = useConfig()

const dateState = ref<Recordable>({
  begin_at: undefined,
  end_at: undefined,
  // 操作类型 [1.添加 2.修改 3.删除 4.批量添加 5.批量删除]
  type: undefined,
  content: undefined,
  module_name: undefined,
  username: undefined,
})

const tableRef = ref()
const { loading, run, pagination, data } = useListRequest(getAdminsOptLogApi, {
  params: dateState,
  immediate: true,
})
function onChange(dateString: any) {
  const [st, et] = dateString || []
  dateState.value.begin_at = st
  dateState.value.end_at = et ? Number(et) + 86399 : undefined
  run()
}
const { createSortChange } = useTable(run, data)

const onSorterChange = createSortChange(dateState)
</script>

<template>
  <main-container
    v-model:pagination="pagination"
    :loading="loading"
    @run="run"
  >
    <template #header>
      <a-range-picker
        value-format="X"
        :placeholder="['选择开始时间', '选择结束时间']"
        style="width: 326px"
        :disabled-date="e => disabledDate(e as Date, true)"
        @change="onChange"
      />
      <a-select
        v-model="dateState.type"
        class="max-w-42"
        placeholder="全部操作类型"
        :options="[
          { label: '全部操作类型', value: undefined },
          ...adminOptTypeOptions,
        ]"
        @change="() => run()"
      />

      <multiple-condition-search
        v-model="dateState"
        :schema="filterSchemes"
        @search="run"
      />
    </template>
    <a-table
      ref="tableRef"
      v-bind="commonTableProps"
      :columns="tableColumns"
      :data="data"
      @sorter-change="onSorterChange"
    />
  </main-container>
</template>

<style scoped></style>
